<template>
  <div>
    <span style="user-select: none;cursor: pointer"  :class="time==='获取验证码'?'activeTime':'disabledTime'">{{time | change}}</span>
  </div>
</template>

<script>
  let flag = false
  export default {
    data () {
      return {
        time : '获取验证码',
      }
    },
    props : {
      start : {
        type : Boolean,
        default(){
            return false
        }
      }
    },
    watch : {
      start (value,oldvalue) {
        if(value == true){
          this.countDown()
        }
      }
    },
    methods: {
      countDown () {
        this.time = 60;
        let time = setInterval(()=>{
          this.time --
          if(this.time == 0){
            this.$emit('countDown')
            this.time = '获取验证码'
            flag = true
            clearInterval(time)
          }
        },1000)
      }
    },
    filters : {
      change (value) {
        if(!value) return ""
        if(!isNaN(value)){
          if(flag == true){
            return `${value}s可重新发送`
          }
          return `${value}s可重新发送`
        }else{
          return value
        }
      }
    }

  }
</script>
<style lang="less" scoped>
  span{
    font-size:28px;
  }
  .disabledTime{
    color: #8a9199;
  }
  .activeTime{
    color: #198cff;
    &:hover{
      color: #007fff;
     }
  }
</style>
